<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
			<el-card shadow="hover" class="pageQueryBoxArea mb10">
				<el-form :model="state.param" :inline="true">
					<el-form-item label="展示方式：">
						<el-select v-model="state.param.showType" placeholder="请选择展示方式" @change="modeChange()">
							<el-option v-for="item in state.query.showTypeList" :key="item.value"
								:label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="商品来源：">
						<el-select v-model="state.param.source" placeholder="请选择商品来源" @change="modeChange()">
							<el-option v-for="item in state.query.sourceList" :key="item.dictValue"
								:label="item.dictName" :value="item.dictValue" />
						</el-select>
					</el-form-item>
					<el-form-item label="商品属性：" >
						<el-select v-model="state.param.type" placeholder="请选择商品类型" @change="modeChange()">
							<el-option v-for="item in state.query.typeList" :key="item.dictValue"
								:label="item.dictName" :value="item.dictValue" />
						</el-select>
					</el-form-item>

					<el-form-item label="销售渠道：">
						<el-select v-model="state.param.channel" placeholder="请选择门店状态" @change="modeChange()">
							<el-option v-for="item in state.query.saleChannelList" :key="item.dictValue"
								:label="item.dictName" :value="item.dictValue" />
						</el-select>
					</el-form-item>
					<el-form-item label="销售终端：" v-if="state.param.channel == 1 || state.param.channel == 2">
						<el-select v-if="state.param.channel == 1" v-model="state.param.terminal" 
							placeholder="请选择销售门店" @change="modeChange()">
							<el-option v-for="item in state.query.storeSaleTerminal" :key="item.id"
								:label="item.name" :value="item.id" />
						</el-select>
						<el-select v-if="state.param.channel == 2" v-model="state.param.terminal" 
							placeholder="请选择线上渠道" @change="modeChange()">
							<el-option v-for="item in state.query.shopSaleTerminal" :key="item.dictValue"
								:label="item.dictName" :value="item.dictValue" />
						</el-select>
					</el-form-item>
					<el-form-item label="商品分类：" v-if="state.param.channel == 1 || state.param.channel == 2">
						<el-cascader v-if="state.param.channel == 1" v-model="state.param.sort"
							placeholder="请选择门店商品分类" :options="state.query.storeSortList"
							:props="{ label: 'text', value: 'id', children: 'children' }" />
						<el-cascader v-if="state.param.channel == 2" v-model="state.param.sort"
							placeholder="请选择商城商品分类" :options="state.query.shopSortList"
							:props="{ label: 'text', value: 'id', children: 'children' }" />
					</el-form-item>
					<el-form-item label="商品搜索：">
						<el-input v-model="state.param.keyWords" placeholder="请输入关键字搜索" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search()">
							<el-icon>
								<ele-Search />
							</el-icon> 搜 索
						</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<el-card shadow="hover" class="pageContentArea" style="display: flex;flex-direction: column;flex: 1;height: inherit;">
				<section style="display: flex;flex-direction: column; flex: 1;height: inherit;">
					<el-tabs>
						<el-tab-pane label="出售中的商品（88）" name="one">
						</el-tab-pane>
						<el-tab-pane label="仓库中的商品(88)" name="two">
						</el-tab-pane>
						<el-tab-pane label="已经售罄商品(88)" name="three">
						</el-tab-pane>
						<el-tab-pane label="回收站的商品(88)" name="four">
						</el-tab-pane>
					</el-tabs>
					<el-row class="mt10 mb10">
						<el-col class="contentMenuBox">
							<el-button class="mr15" type="primary" @click="addCommodity('add')">
								<el-icon>
									<ele-Plus />
								</el-icon> 新 增
							</el-button>
							<el-dropdown class="mr15">
								<el-button>
									批量修改&nbsp;<el-icon> <ele-ArrowDown /></el-icon>
								</el-button>
								<template #dropdown>
									<el-dropdown-menu>
										<el-dropdown-item>会员价</el-dropdown-item>
										<el-dropdown-item>关联门店</el-dropdown-item>
										<el-dropdown-item>商品分类</el-dropdown-item>
										<el-dropdown-item>物流设置</el-dropdown-item>
										<el-dropdown-item>购买送积分</el-dropdown-item>
										<el-dropdown-item>购买送优惠券</el-dropdown-item>
										<el-dropdown-item>关联商品标签</el-dropdown-item>
										<el-dropdown-item>活动推荐</el-dropdown-item>
									</el-dropdown-menu>
								</template>
							</el-dropdown>
							<el-button>
								<el-icon>
									<ele-Download />
								</el-icon> 导 出
							</el-button>
						</el-col>
					</el-row>
					<el-table v-if="state.param.showType == 0" v-loading="state.loading" :data="state.tableData" row-key="spuId" ref="goodSpuTableRef">
						<el-table-column type="expand" width="1">
							<template #default="props">
								<section v-if="props.row.isShowSkuList">
									<expandSkuMsg ref="expandSkuMsgRef" :skuTableData="props.row.skuList"></expandSkuMsg>
								</section>
								<section class="ml80 mr80" v-if="props.row.isShowSpuMsg">
									<el-row>
										<el-col :span="5" class="mb10">
											<span>操作人：{{ props.row.updateBy }}</span>
										</el-col>
										<el-col :span="5" class="mb10">
											<span>创建人：{{ props.row.createdBy }}</span>
										</el-col>
										<el-col :span="5" class="mb10">
											<span>操作时间：{{ props.row.updateTime }}</span>
										</el-col>
										<el-col :span="5" class="mb10">
											<span>创建时间：{{ props.row.createdTime }}</span>
										</el-col>
									</el-row>
								</section>
							</template>
						</el-table-column>
						<el-table-column label="" width="55" >
							<template #default="scope">
								<el-icon title="展开商品其他信息" @click="expandSpuMsg(scope.row)">
									<ele-CaretRight v-if="!scope.row.isShowSpuMsg"/>
									<ele-CaretBottom v-if="scope.row.isShowSpuMsg"  />
								</el-icon>
							</template>
						</el-table-column>
						<el-table-column type="selection" width="55" />
						<el-table-column label="SPU" width="90">
							<template #default="scope">
								<span>{{ scope.row.spuId }}</span>
							</template>
						</el-table-column>
						<el-table-column label="图片" width="90">
							<template #default="scope">
								<div style="display: flex;justify-content:flex-start;align-items: center;">
									<el-icon title="展开商品Sku"  @click="expandSkuList(scope.row)">
										<ele-Plus v-if="!scope.row.isShowSkuList"/>
										<ele-Minus v-if="scope.row.isShowSkuList"/>
									</el-icon>
									<el-image class="borderRadius5 ml5 mr20" style="width:32px; height: 32px;" :src="scope.row.imgUrl"
										fit="cover" />
								</div>
							</template>
						</el-table-column>
						<el-table-column label="商品名称" width="360">
							<template #default="scope">
								<span>{{ scope.row.spuName }}</span>
							</template>
						</el-table-column>
						<el-table-column label="零售价"  >
							<template #default="scope">
								<span>{{ scope.row.priceRange }}元</span>
							</template>
						</el-table-column>
						<el-table-column label="来源"  >
							<template #default="scope">
								<span>{{ scope.row.sourceName }}</span>
							</template>
						</el-table-column>
						<el-table-column label="销售渠道"  >
							<template #default="scope">
								<span>{{ scope.row.salesChannelName }}</span>
							</template>
						</el-table-column>
						<el-table-column label="状态" >
							<template #default="scope">
								<el-switch v-model="scope.row.onShelf" />
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template #default="scope">
								<span style="color:var(--el-color-primary);" @click="addCommodity('edit',scope.row.spuId)"> 详情 </span>
								<span style="color:var(--el-color-primary);">&nbsp;|&nbsp;</span>
								<el-dropdown>
									<span style="color:var(--el-color-primary);" class="font16"> 操作 </span>
									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item>编辑</el-dropdown-item>
											<el-dropdown-item>会员价</el-dropdown-item>
											<el-dropdown-item>关联门店</el-dropdown-item>
											<el-dropdown-item>物流设置</el-dropdown-item>
											<el-dropdown-item>购买送积分</el-dropdown-item>
											<el-dropdown-item>购买送优惠券</el-dropdown-item>
											<el-dropdown-item>关联商品标签</el-dropdown-item>
											<el-dropdown-item>活动推荐</el-dropdown-item>
											<el-dropdown-item @click="delFun('spu',scope.row.spuId)">删除</el-dropdown-item>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
							</template>
						</el-table-column>
					</el-table>
					<el-table v-if="state.param.showType == 1" v-loading="state.loading" :data="state.tableData" row-key="skuId" ref="goodSkuTableRef"
						:header-cell-style="{ textAlign: 'center'}" style="width: 100%">
						<el-table-column type="expand" width="1">
							<template #default="props">
								<section class="ml80 mr80" v-if="props.row.isShowSkuMsg">
									<el-row>
										<el-col :span="5" class="mb10">
											<span>操作人：{{ props.row.updateBy }}</span>
										</el-col>
										<el-col :span="5" class="mb10">
											<span>创建人：{{ props.row.createdBy }}</span>
										</el-col>
										<el-col :span="5" class="mb10">
											<span>操作时间：{{ props.row.updateTime }}</span>
										</el-col>
										<el-col :span="5" class="mb10">
											<span>创建时间：{{ props.row.createdTime }}</span>
										</el-col>
									</el-row>
								</section>
							</template>
						</el-table-column>
						<el-table-column label="" width="55" >
							<template #default="scope">
								<el-icon title="展开商品其它信息"  @click="expandSkuMsgFun(scope.row)">
									<ele-CaretRight v-if="!scope.row.isShowSkuMsg"/>
									<ele-CaretBottom v-else-if="scope.row.isShowSkuMsg"  />
								</el-icon>
							</template>
						</el-table-column>
						<el-table-column label="SKU" width="90"  >
							<template #default="scope">
								<span>{{ scope.row.skuId }}</span>
							</template>
						</el-table-column>
						<el-table-column label="图片" >
							<template #default="scope">
								<div style="display: flex;justify-content:center;align-items: center;">
									<el-image style="width:32px;height: 32px;" :src="scope.row.imgUrl" fit="cover" />
								</div>
							</template>
						</el-table-column>
						<el-table-column label="商品名称"  >
							<template #default="scope">
								<span> {{ scope.row.spuName }} {{ scope.row.skuList[0].skuSerialName }}</span>
							</template>
						</el-table-column>
						<el-table-column label="属性">
							<template #default="scope">
								<span>{{ scope.row.skuList[0].skuTypeName }}</span>
							</template>
						</el-table-column>
						<el-table-column label="可用次数">
							<template #default="scope">
								<span>{{ scope.row.skuList[0].skuTypeName }}</span>
							</template>
						</el-table-column>
						<el-table-column label="可用时长">
							<template #default="scope">
								<span>{{ scope.row.skuList[0].skuTypeName }}</span>
							</template>
						</el-table-column>
						<el-table-column label="服务时长">
							<template #default="scope">
								<span>{{ scope.row.skuList[0].skuTypeName }}</span>
							</template>
						</el-table-column>
						<el-table-column label="零售价">
							<template #default="scope">
								<span>{{ scope.row.skuList[0].lowPrice }}元</span>
							</template>
						</el-table-column>
						<el-table-column label="来源">
							<template #default="scope">
								<span>{{ scope.row.sourceName }}</span>
							</template>
						</el-table-column>
						<el-table-column label="销售渠道">
							<template #default="scope">
								<span>{{ scope.row.salesChannelName }}</span>
							</template>
						</el-table-column>
						<el-table-column label="状态">
							<template #default="scope">
								<el-switch v-model="scope.row.onShelf" />
							</template>
						</el-table-column>
						<el-table-column label="操作" width="120">
							<template #default="scope">
								<el-button text type="primary" @click="addCommodity('edit',scope.row.spuId)">
									详情
								</el-button>
								<el-dropdown>
									<el-button text type="primary">
										操作
									</el-button>
									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item>编辑</el-dropdown-item>
											<el-dropdown-item>会员价</el-dropdown-item>
											<el-dropdown-item>关联门店</el-dropdown-item>
											<el-dropdown-item>物流设置</el-dropdown-item>
											<el-dropdown-item>购买送积分</el-dropdown-item>
											<el-dropdown-item>购买送优惠券</el-dropdown-item>
											<el-dropdown-item>关联商品标签</el-dropdown-item>
											<el-dropdown-item>活动推荐</el-dropdown-item>
											<el-dropdown-item @click="delFun('sku',scope.row.skuId)">删除</el-dropdown-item>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
							</template>
						</el-table-column>
					</el-table>
					<el-row justify="end">
						<el-col :span="24" class="flex-end-center">
							<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
								:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.param.pageNum" background
								v-model:page-size="state.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
								:total="state.total">
							</el-pagination>
						</el-col>
					</el-row>
				</section>
			</el-card>
		</div>
	</div>
</template>

<script setup lang="ts" name="saleIndex">
import { reactive,onMounted,ref,defineAsyncComponent} from 'vue';
import { useRouter } from 'vue-router';
import { configData,storeList } from "/@/api/common";
import { productList, spuDelete, skuDelete ,brandList,productCategoryList, } from '/@/api/commodity';
import { ElMessageBox, ElMessage } from 'element-plus';
// 引入组件
const expandSkuMsg = defineAsyncComponent(() => import('/@/views/commodity/goodList/components/expandSkuMsg.vue'));
const router = useRouter();
// 定义变量内容
const expandSkuMsgRef = ref();

const goodSpuTableRef = ref();
const goodSkuTableRef = ref();
const state = reactive({
	param: {
		showType: 0, // 商品展示方式 
		source: -1, // 商品来源
		brand: -1, // 商品品牌
		type: -1, // 商品属性
		channel: -1, // 商品销售渠道
		sort: -1, // 商品分类
		terminal: null, // 销售终端
		keyWords:'', // 搜索关键字
		pageNum: 1,
		pageSize: 10,
	},
	query: {
		// 展示方式
		showTypeList: [
			{ value: 0, label: 'SPU列表' },
			{ value: 1, label: 'SKU列表' }
		],
		// 商品来源
		sourceList: [] as Array<any>,
		// 商品品牌
		brandList: [] as Array<any>,
		// 商品属性
		typeList: [] as Array<any>,
		// 销售渠道
		saleChannelList: [] as Array<any>,
		// 商品分类列表
		shopSortList: [] as Array<any>,
		storeSortList: [] as Array<any>,
		// 销售终端列表(根据渠道区分，线上渠道取线上终端，门店渠道取门店终端)
		shopSaleTerminal: [] as Array<any>,
		storeSaleTerminal: [] as Array<any>,
	},
	loading: false,
	total: 0,
	tableData: [{}]
});

// 获取商品列表
const getGoodsList = async () => {
	state.loading = true;//不用传参， 请求得入参在上面都定义了 param这里吗？
	let params = {
		spuType: 1,
		showType: state.param.showType,
		pageNum: state.param.pageNum,
		pageSize: state.param.pageSize,
	}
	if(state.param.showType == 0){
		const { results } = await productList(params);
		state.tableData = results.records.map((obj: any) => ({  
			...obj,  
			isExpand:false,
			isShowSpuMsg:false, 
			isShowSkuList:false,  
		}));
		state.loading = false;
		state.total = results.total;
	}else if(state.param.showType == 1){
		const { results } = await productList(params);
		state.tableData = results.records.map((obj: any) => ({  
			...obj,  
			isShowSkuMsg:false,
		}));
		state.loading = false;
		state.total = results.total;
	}
}


// 门店类型切换 (如果不是全部则清空选中门店 以及订单选中状态)
const modeChange = () => {
	getGoodsList();
}

// 分页点击 条数
const onHandleSizeChange = (val: number) => {
	state.param.pageSize = val;
	getGoodsList();
};
// 分页点击
const onHandleCurrentChange = (val: number) => {
	state.param.pageNum = val;
	getGoodsList();
};

// 点击spu其他信息
const expandSpuMsg = (row?: any) => {
	// expand 展开
	if(row.isShowSpuMsg){
		// sku相关信息表展开状态
		row.isShowSpuMsg = false;
		goodSpuTableRef.value.toggleRowExpansion(row);
	}else{ // 未打开
		// msg 展开时关闭sku	
		row.isShowSpuMsg = true;
		if(row.isShowSkuList){
			row.isShowSkuList = false;
		}else{
			goodSpuTableRef.value.toggleRowExpansion(row);
		}
	}
};

// 展开商品sku列表点击sku列表
const expandSkuList = async (row: any) => {
	// 当前expand信息展开状态时 且sku列表展开时直接关闭expand
	if(row.isShowSkuList){
		row.isShowSkuList = false;
		goodSpuTableRef.value.toggleRowExpansion(row);
	}else{
		// sku 展开时关闭msg	
		row.isShowSkuList = true;
		if(row.isShowSpuMsg){
			row.isShowSpuMsg = false;
		}else{
			goodSpuTableRef.value.toggleRowExpansion(row);
		}
	}
};

// 展示商品sku相关信息
const expandSkuMsgFun = (row?: any) => {
	if(row.isShowSkuMsg){
		// sku相关信息表展开状态
		row.isShowSkuMsg = false;
		goodSkuTableRef.value.toggleRowExpansion(row);
	}else{ // 未打开
		row.isShowSkuMsg = true;
		goodSkuTableRef.value.toggleRowExpansion(row);
	}
};

// 商品搜索
const search = () => {
	if (state.param.dateTime?.length == 2) {
		state.param.startTime = state.param.dateTime[0]
		state.param.endTime = state.param.dateTime[1]
	}
	state.param.pageNum = 1;
	getGoodsList()
}

// 商品sku或spu删除
const delFun = (type: string,id?: number) => {
	ElMessageBox.confirm(`此操作将永久删除该规格项，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning', 
	}).then( async() => {
		// state.tableData.loading = true;
		if(type == 'spu'){
			let res = await spuDelete(id);
			ElMessage.success('删除成功');
		}else{
			let res = await skuDelete(id);
			ElMessage.success('删除成功');
		}
		getGoodsList();
	}).catch(() => {});
}

// 商品新增或者编辑
const addCommodity = (value: string,id?: number) => {
	router.push({
		path: '/commodity/goodList/add',
		query: { status: value, id: id},
	});
}

const getConfigDataFun = async () =>{
	let params = {
		dictType: ''// 数组传空默认全部
	}
	const { results } = await configData(params);
	state.query.sourceList = results.source; // 商品来源;
	state.query.sourceList.unshift({dictName:'全部',dictValue:-1})
	state.query.typeList = results.spuType1; // 商品属性
	state.query.typeList.unshift({dictName:'全部',dictValue:-1})
	state.query.saleChannelList = results.salesChannel; // 销售渠道；
	state.query.saleChannelList.unshift({dictName:'全部',dictValue:-1})
	state.query.shopSaleTerminal = results.salesOnlineChannel; // 线上销售渠道
	state.query.shopSaleTerminal.unshift({dictName:'全部',dictValue:-1})
}


// 品牌列表获取
const getBrandList = async () => {
	const { results } = await brandList({ mode: null });
	state.query.brandList = results.records;
	state.query.brandList.unshift({brandName:'全部',brandId:-1})
}

// 门店商品分类获取
const getStoreCategoryList = async () => {
	const { results } = await productCategoryList({ platformType: 0 });
	state.query.shopSortList = results;
}

// 商城商品分类获取
const getShopCategoryList = async () => {
	const { results } = await productCategoryList({ platformType: 1 });
	state.query.storeSortList = results;
}
// 获取门店列表
const getStoreList = async() => {
    state.loading = true;
	const { results } = await storeList({});
	state.loading = false;
	state.query.storeSaleTerminal = results.records;
};
			
onMounted(() => {
	// 获取商品品牌列表
	getBrandList();
	// 获取门店列表
	getStoreList();
	// 获取商品分类列表
	getStoreCategoryList();
	getShopCategoryList();
	// 获取系统配置项
	getConfigDataFun();
	// 获取商品列表
	getGoodsList();
})
</script>
<style scoped lang="scss">
@import '../../../theme/mixins/index.scss';
.pageContentArea{
	:deep(.el-card__body){
		padding-top: 10px;
		display: flex;
		flex-direction: column;
		flex: 1;
		height: inherit;
		.el-tabs{
			.el-tabs__header{
				margin-bottom: 0;
			}
		}
		.el-table{
			flex: 1;
			.el-table__inner-wrapper::before{
				background: none !important;
			}
		}
		.contentMenuBox{
			.el-dropdown{
				.el-icon{
					margin-right: 0px !important;
				}
			}
		}
	}

	// 隐藏expand 箭头
	:deep(.el-table__expand-column){
		visibility: hidden;
	}
}

</style>
